$(function () {
    // 参数设置为全局对象，将来每个分页都要用
    let q = {
        pagenum: 1,	        //是	int	页码值
        pagesize: 2,	    //是	int	每页显示多少条数据
        cate_id: '',	    //否	string	文章分类的 Id
        state: '',	        //否	string	文章的状态，可选值有：已发布、草稿
    }

    // 需求1：初始化文章列表 - 封装函数，将来复用
    initArticleList()
    function initArticleList() {
        axios({
            url: '/my/article/list',
            method: 'get',
            params: q
        }).then(res => {
            //成功回调
            // console.log(res.data.data)
            if (res.data.status !== 0) {
                // 如果提示成功，但页面渲染无数据，可能是if判定条件写错
                return layer.msg(res.data.message)
            }

            // 渲染
            let arr = []
            res.data.data.forEach(ele => {
                arr.push(`
                    <tr>
                        <td>${ele.title}</td>
                        <td>${ele.cate_name}</td>
                        <td>${dateFormat(ele.pub_date)}</td>
                        <td>${ele.state}</td>
                        <td>
                            <button class="layui-btn" lay-submit>编辑</button>
                            <button class="layui-btn layui-btn-primary" lay-submit>删除</button>
                        </td>
                    </tr>
                `)
            })
            // 循环结束赋值
            $('tbody').empty().html(arr.join(""))
            // 分页调用
            rederPage(res.data.total)
        })
    }

    // 需求2：渲染筛选中的文章类别列表
    let form = layui.form
    initAtrCateList()
    function initAtrCateList() {
        axios({
            url: '/my/article/cates',
            method: 'get',
            params: q
        }).then(res => {
            //成功回调
            // console.log(res.data.data)
            if (res.data.status !== 0) {
                // 如果提示成功，但页面渲染无数据，可能是if判定条件写错
                return layer.msg(res.data.message)
            }

            // 渲染
            let arr = ['<option value="">请选择文章所属分类</option>']
            // 遍历返回的数据
            res.data.data.forEach(ele => {
                arr.push(`
                <option value="${ele.Id}">${ele.name}</option>
                `)
            })
            // empty()清除子节点，加快代码效率
            // 赋值给select表单
            $('[name=cate_id]').empty().html(arr.join(""))
            // form.render() 可以渲染layui中的select/checkbox/radio
            form.render()
        })
    }

    // 需求3：筛选
    $('#searchForm').on('submit', function (e) {
        e.preventDefault()
        // cate_id和state的值修改，根据form表单里面的值修改
        q.cate_id = $('[name=cate_id]').val()
        q.state = $('[name=state]').val()
        // 重新渲染文章列表
        initArticleList()
    })

    // 需求4: 分页 封装调用
    function rederPage(total) {
        let laypage = layui.laypage;
        laypage.render({
            elem: 'pageBox',     //注意，这里的 test1 是 ID，不用加 # 号
            count: total,        //数据总数，从服务端得到
            limit: q.pagesize,   //每页显示多少条
            curr: q.pagenum,      //第几页
            layout: ['count', 'limit', 'prev', 'page', 'next', 'refresh', 'skip'],
            limits:[2,5,10,15,20],
            // 当分页被切换时触发，页面切换的时候触发，每页显示条数改变的时候触发
            // 函数返回两个参数：obj（当前分页的所有选项值）、first（是否首次，一般用于初始加载的判断）
            jump: function (obj, first) {
                //obj包含了当前分页的所有参数，比如：
                // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                // console.log(obj.limit); //得到每页显示的条数

                //首次不执行
                if (!first) {   // 当不是首次时
                    //当前页改变，条数改变，重新渲染列表
                    q.pagenum = obj.curr 
                    q.pagesize = obj.limit
                    initArticleList()
                }
            }
        })
    }
})
